<%--
  Created by IntelliJ IDEA.
  User: XTT
  Date: 2022/10/12
  Time: 14:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 100%;
            height: 400px;
            background: linear-gradient(
                    rgba(0, 0, 0, 0.3),
                    rgba(0, 0, 0, 0.3)
            ), url("${pageContext.request.contextPath}/images/jhk-1665474317202.jpg");
            background-size: 100% 100%;

        }
        .h1{
            padding-left: 200px;
            padding-top: 90px;
            color: #ffffff;
            font-size: 70px;
            font-family: 华文楷体;
        }
        .login{
            border: 1px solid red;
            height: 350px;
            background: white;
            width: 500px;
            float: right;
            margin-top: -250px;
            margin-right: 40px;
        }
        h1{
            text-align: center;
            font-family: 华文楷体;
        }
        #form{
            text-align: center;
            margin-top: 30px;
        }
        .log{
            font-size: 20px;
            padding-left: 20px;
            width: 350px;
            height: 50px;
            border-radius: 5px;
            border: 1px solid #8c8c8c;
        }
        .checkbox{
            width: 20px;
            height: 20px;
            border-radius: 5px;
            border: 1px solid #8c8c8c;
        }
        #submit{
            border-radius: 5px;
            border: 1px solid #00b7ee;
            margin-left: 20px;
            color: white;
            font-size: 30px;
            background-color: #00b7ee;
            margin-top: 20px;
            width: 300px;
            height: 50px;
        }
        .two{
            margin-top: 40px;
            text-align: center;
        }
        .fw{
            float: left;
            margin-left: 85px;
            width: 350px;
            height: 300px;
        }
        .fw p{
            padding-top: 20px;
        }
        .footer{
            width: 100%;
            height: 200px;
            background-color: #393D49;
            text-align: center;
        }
        .footer-fiv{
            width: 390px;
            float: left;
            margin-left: 50px;
        }
        ul{
            margin-left: 145px;
            padding-top: 15px;
        }
        ul li{
            display: inline;
            padding-left: 20px;
        }
        .nb{
            text-indent: 2em;
        }
    </style>
</head>
<body>
<div class="content">
    <div>
        <p class="h1">ikun酒店</p>
        <p style="color: white;padding-left: 190px;">一个为ikun建造两年半的豪华酒店，希望ikun们都来住宿</p>
        <p style="padding-top: 50px;"><a href="#" style="color: white;margin-left: 190px;padding-bottom: 5px;border-bottom: 1px solid yellow;">
            现在
        </a>
        </p>
    </div>
</div>
<div class="two">
    <p><strong style="color: #FFB800">我们的服务</strong></p>
    <p style="font-size: 40px;padding-top: 10px;color: #2E2D3C;font-family: 华文楷体">发现我们的服务</p>
    <div style="width: 1400px;height: 550px;margin: 0 auto;margin-top: 20px">
        <div class="fw">
            <img src="${pageContext.request.contextPath}/images/a3.jpg" height="80" width="80">
            <p style="font-size: 25px">旅行计划</p>
            <p class="nb">这座城市秋季及初冬

                非常适宜开启一场南方的旅行

                如果你不喜欢市中心的热闹繁华

                这家藏在华南植物园里的湖景酒店

                一定能在众多的选择中打动你💘</p>
        </div>
        <div class="fw">
            <img src="${pageContext.request.contextPath}/images/a1.jpg" height="80" width="80">
            <p style="font-size: 25px">宴会服务</p>
            <p class="nb">ikun酒店的宴会具有色、香、味、形、器、质、名具佳,餐厅环境高雅华贵,
                餐具考究,客人优质的宴会服务,为客人在精神和物质上都得到高档次享受。</p>
        </div>
        <div class="fw">
            <img src="${pageContext.request.contextPath}/images/a5.jpg" height="80" width="80">
            <p style="font-size: 25px">临时保姆</p>
            <p class="nb">ikun酒店的服务都是保姆级服务,愿ikun酒店的服务质量和你随时相伴</p>
        </div>
        <div class="fw">
            <img src="${pageContext.request.contextPath}/images/a6.jpg" height="80" width="80">
            <p style="font-size: 25px">洗衣房</p>
            <p class="nb">入住的顾客可享用ikun酒店的洗衣房，洗衣房有各种各样的洗衣服务</p>
        </div>
        <div class="fw">
            <img src="${pageContext.request.contextPath}/images/a4.jpg" height="80" width="80">
            <p style="font-size: 25px">雇佣司机</p>
            <p class="nb">ikun酒店为您营造温馨的雇佣司机竭诚为您服务,希望快乐伴您一路行
                ，
                贴心伴您一路
                希望ikun酒店的服务能给您帮助
                您需要帮助ikun酒店将竭诚服务</p>
        </div>
        <div class="fw">
            <img src="${pageContext.request.contextPath}/images/a2.jpg" height="80" width="80">
            <p style="font-size: 25px">酒和酒吧</p>
            <p class="nb">ikun酒店有符合每位顾客的酒，不管是国酒、洋酒都一样俱全，酒店内设有清静的豪华酒吧</p>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-fiv" style="margin-top: -10px">
        <p style="padding-right: 60px;color: white;font-size: 50px;font-family: 华文彩云;">ikun</p>
        <p style="padding-left: 110px;padding-top: 10px;color: white">利用模板做的案例解析，共同学习参考</p>
    </div>
    <div class="footer-fiv">
        <p><strong style="color: #FFB800;padding-right: 45px">联系我们</strong></p>
        <p style="color: white;padding-top: 30px">qq:1352441260</p>
        <p style="color: white;padding-right: 20px;padding-top: 10px">群号：待申请</p>
        <p style="color: white;padding-left: 60px;padding-top: 10px">同一个地球，同一片蓝天</p>
    </div>
    <div class="footer-fiv">
        <p><strong style="padding-right: 50px;color: #FFB800">最新的</strong></p>
        <p style="color: white;padding-top: 30px">欢迎预定测试</p>
    </div>
</div>
<footer style="height: 50px;background-color: #1b1d21;border-top: 1px solid black">
    <ul style="color: white">
        <li>接触</li>
        <li>使用条款</li>
        <li>隐私</li>
        <li>环保政策</li>
        <li style="padding-left: 400px">Copyright &copy; 2022 Alt rights 91tt | This ikun is made with ♥</li>
    </ul>
</footer>
</body>
</html>
